<template>
  <el-dialog v-model="isShow" :title="'【' + currRoleInfo.name + '】' + '权限分配'" align-center draggable width="60%">
    <div>
      <el-tree
        ref="treeRef"
        :data="permission_data"
        :default-checked-keys="firstPermissions"
        :props="props"
        node-key="name"
        show-checkbox
      >
        <template v-slot="{ node, data }">
          <span v-if="data.children">
            <span>{{ node.label }}</span>
          </span>
          <span v-if="!data.children">
            <span class="flex w-1/6">{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>
    <div class="mt-4 flex justify-end">
      <el-button @click="submitData">提交</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { getAuthMenuListApi, getAuthMenuPermissionApi, getAuthMenuSelectListApi } from "@/api/modules/menu";
import { ResultData } from "@/api/interface";
import { dtoSysRoleInfo } from "@/api/dbdto/dtoSysRole";
import type Node from "element-plus/es/components/tree/src/model/node";
import { requestSysRolePermissionsSave, requestSysRolePermissionsSearch } from "@/api/modules/sysRolePermissions";
import { RequestSysRolePermissionsSave } from "@/api/interface/SysRolePermission/RequestSysRolePermissionsSave";
import { RespOk } from "@/constant/codes";
import { ElMessage } from "element-plus";
import { Extra } from "@/api/interface/Search/Extra";
import { ReqSearch } from "@/api/interface/Search/ReqSearch";
import { requestSysRoleSearch } from "@/api/modules/sysRole";
import { Field } from "@/api/interface/Search/Field";
import { dtoSysRolePermissionsInfo } from "@/api/dbdto/dtoSysRolePermissions";

const props: any = {
  label: "title",
  children: "children"
};

let treeRef = ref();

const submitData = () => {
  //获取选中节点的所有值（SysMenuTree类型），返回对量列表
  // console.log(treeRef.value!.getCheckedNodes(false, false));
  let params: RequestSysRolePermissionsSave = {
    role_id: currRoleInfo.value.id,
    permission_names: treeRef.value!.getCheckedKeys(false),
    creator_id: 0
  };

  //保存权限
  requestSysRolePermissionsSave(params).then((res: ResultData) => {
    if (res.code == RespOk) {
      ElMessage({ type: "success", message: "保存成功" });
      isShow.value = false;
    }
  });

  //获取选中节点的node-key值，返回字符串列表
  //console.log(treeRef.value!.getCheckedKeys(false));
};

interface SysMenuTree {
  id: number;
  name: string;
  title: string;
  path: string;
  sort: number;
  is_penultimate: boolean; //是否倒数第二节点
  is_permission: boolean; //是否为权限节点
  parent_id: number;
  permissions: string;
  component: string;
  meta?: any;
  children: SysMenuTree[];
}

let permission_select = ref([]);
let permission_data = ref([]);
onMounted(() => {
  getAuthMenuPermissionApi().then((res: ResultData) => {
    permission_data.value = res.data;
    console.log(permission_data.value, " ---permission_data.value");
  });
});
//获取当前用户的权限列表

let firstPermissions = ref([]);
const GetCurrRolePermission = (roleId: number) => {
  let extra: Extra = {
    pageNum: 1,
    pageSize: 3000
  };
  let searchParms: ReqSearch = {
    //搜素请求参数
    extra: extra,
    wheres: [{ field: "role_id", opt: "=", value: roleId } as Field]
  };

  requestSysRolePermissionsSearch(searchParms).then((res: ResultData) => {
    if (res.code == RespOk) {
      let list: dtoSysRolePermissionsInfo[] = res.data.list;
      let permissionNames = list.map((s: dtoSysRolePermissionsInfo) => {
        return s.permission_full_name;
      });

      treeRef.value.setCheckedKeys([]);
      treeRef.value.setCheckedKeys(permissionNames);

      // firstPermissions.value = list.map((s: dtoSysRolePermissionsInfo) => {
      //   return s.permission_full_name;
      // });
    }
  });
};

//以下是弹窗控制相关api
let isShow = ref(false);
let currRoleInfo = ref<dtoSysRoleInfo>({
  created_at: undefined,
  description: "",
  id: 0,
  sort: 0,
  name: ""
});

const ShowPop = (row: dtoSysRoleInfo) => {
  currRoleInfo.value = row;
  GetCurrRolePermission(currRoleInfo.value.id);
  isShow.value = true;
};

defineExpose({ ShowPop });
</script>
<style scoped>
.is-penultimate > .el-tree-node__content {
  color: #626aef;
}

.el-tree-node.is-expanded.is-penultimate > .el-tree-node__children {
  display: flex;
  flex-direction: row;
}

.is-penultimate > .el-tree-node__children > div {
  width: 25%;
}
</style>
